Introduction

Think of a wireframe as an architect's blueprint: it is a plan and outline for a digital product. The purpose of a wireframe is to create a basic structure for each screen design before considering specifics such as branding colors and images.

A wireframe provides a way of communicating ideas quickly, which can be polished later. The focus is on the user experience and what they need to do to accomplish a task.

Wireframes can be sketched out by hand; however, in this exercise Figma will be used to draw the wireframe. You use Figma to draw the wireframe so that it can be shared with other team members, giving them the opportunity to make comments in the same document.

In this exercise, you will create a wireframe of the home screen for the project.

Scenario

The Little Lemon restaurant's owners have had difficulties with their system for ordering food online for delivery and the owners have asked you to create an iOS app to resolve this issue.

You are tasked with creating a wireframe for the home screen to create a skeleton for the following content blocks:

Instructions

Step 1: Create the frame and grid

In Figma, select the iPhone 14 Plus (428 x 926) frame from the Frames panel.

Add a 4-column layout grid to the frame with a margin of 25 and a gutter of 20 . It should appear like the image below:

For a recap on creating grids, please refer to the video Grids and constraints from Module 3, Lesson 1 of the course Principles of UX and UI Design .

Step 2: Construct content blocks

In the first frame, you need the content blocks to contain the following:

You can construct these content blocks using rectangles, and then name the appropriate blocks as follows:

Step 3: Set up

Next, it is time to move these content blocks out of the frame. Select the rectangles and make them narrower. This will give you a rough guide of the content blocks to use as a reference to design within the frame. Consult the images below for reference:

Step 4: Top bar

Start by setting up the elements for the top bar.  The elements required are the:

For the logo, draw a rectangle and draw diagonal lines through it. This is a conventional way to denote a placeholder on a wireframe if an image is not readily available. You then do the same for the user profile, as demonstrated below:

Step 5: Hero block

In the Hero content block, you want to include the Little Lemon restaurant name, with the city location included. After this is a brief description of what type of food that location offers.

Adrian wants the users to be able to have the ability to search for a specific dish, so let’s include this in the content block. You can also add a background shown in grey and populate the block.

Step 6: Menu breakdown block

Next is the Highlights block. Adrian wants his users to have the ability to filter the menu categories. You also want to emphasize to users that this is a food-ordering app, so add the text Order for Delivery .

In this block, you'll add menu category filter buttons as shown below:

Step 7: Menu items block

What you now need in this section is a title, as well as the names of dishes, and the description, price, and image of each dish. You also need to note that when a dish is clicked the user is taken to another screen, and that this section is vertically scrollable to see further items.

A button should also be added so the user can go to the order online page.

You can repeat this process for all the screens of the app. As noted earlier, no colors, specific fonts or images are included. All that is important here is the content layout and functionality.

Conclusion

You have now learned about the basics of wireframing and wireframed the first screen of the application. You should now be able to continue to wireframe and design your solution for the online order and delivery service.